<template>
  <a-row :style="'width: ' + width" :class="{border: border}" class="form-item">
    <div class="form-title" v-if="title">{{title}}</div>
    <template v-for="(item, index) in formFrame" v-if="isInit">
      <div style="height: 1px; width: 1px;clear:both" v-if="item.newline"></div>
      <a-col class="input-item" :span="item.span || 18" v-if="calcIf(item)">
        <div class="input-title" :style="{width: labelWidth, flex: '0 0 ' + labelWidth}" v-if="item.title">{{item.title}}:<span
            v-if="item.required" class="star">*</span></div>
        <div class="input-title-empty-2" v-else></div>

        <div style="flex-grow: 1; padding-left: 10px;">
          <span v-if="item.prefix" style="margin-left:0px; margin-right: 6px;">{{item.prefix}}</span>
          <!-- {{item.options}} -->
          <a-input :disabled="item.disabled" v-model.trim="formData[item.key]" :style="'width:' + item.input_width" :placeholder="item.placeholder || '请输入'" :size="size"
            v-if="!item.type || item.type === 'input'"></a-input>
          <a-input :disabled="item.disabled" v-model="formData[item.key]" type="password" :style="'width:' + item.input_width" :placeholder="item.placeholder || '请输入'" :size="size"
              v-if="item.type === 'password'"></a-input>
<!--          <a href="javascript:;"  @click="item.callback" v-if="item.type === 'button'">{{item.text}}</a> -->
          <a-input-number style="width: 180px;" :placeholder="item.placeholder || '请输入整数'" :disabled="item.disabled" v-model.number="formData[item.key]" :size="size" v-else-if="item.type === 'number'"></a-input-number>
          <a-input style="width: 80px;" :disabled="item.disabled" type="color" v-model="formData[item.key]" :size="size" v-else-if="item.type === 'color'"></a-input>
          <iDatePicker :showTime="item.showTime === false ? false : true" :showAll="item.showAll === true ? true : false" v-model="formData[item.key]" :size="size" v-else-if="item.type === 'date'"></iDatePicker>
          <i-switch :disabled="item.disabled" :active="item.active || 1" v-model="formData[item.key]" :size="size"
            v-else-if="item.type === 'boolean'"></i-switch>
            <a-switch v-else-if="item.type==='normal'" :active="item.active || 1" :disabled="switchDisabled" @change="onChange" v-model="formData[item.key]"></a-switch>
            <a-switch v-else-if="item.type==='optional'" :active="item.active || 1" :disabled="switchDisabled1" @change="onChange1" v-model="formData[item.key]"></a-switch>
            <!-- <i-switch :disabled="item.disabled" :active="item.active || 1" v-model="formData[item.key]" :size="size"
            v-else-if="item.type === 'aaa'"></i-switch>
            <i-switch :disabled="item.disabled" :active="item.active || 1" v-model="formData[item.key]" :size="size"
            v-else-if="item.type === 'bbb'"></i-switch> -->
          <a-textarea :placeholder="item.placeholder || '请输入'" rows="4"  v-model="formData[item.key]" :size="size" v-else-if="item.type === 'textarea'"></a-textarea>
          <a-select allowClear class="select" v-model="formData[item.key]" :size="size" v-else-if="item.type === 'select'">
            <!-- <a-select-option value="">请选择</a-select-option> -->
            <a-select-option :value="option.value || option" v-for="option in item.options">{{option.title || option}}</a-select-option>
          </a-select>
          <a-select allowClear class="select" mode="multiple" v-model="formData[item.key]" :size="size" v-else-if="item.type === 'multi_select'">
            <!-- <a-select-option value="">请选择</a-select-option> -->
            <a-select-option :value="option.value || option" v-for="option in item.options">{{option.title || option}}</a-select-option>
          </a-select>
          <a-select allowClear class="select" v-model="formData[item.key]" :size="size" v-else-if="item.type === 'year'">
            <a-select-option :value="option" v-for="option in years">{{option}}</a-select-option>
          </a-select>
          <UploadImages :defaultVal="item.default" :size="size" :sizeLimit="item.sizeLimit" :isShowTips="item.isShowImageTips" :imgStyle="item.style" :multiple="true" v-model="formData[item.key]"
            v-else-if="item.type === 'images'"></UploadImages>
          <UploadImages :showLibrary="item.showLibrary === false ? false : true" :defaultVal="item.default" :size="size" :sizeLimit="item.sizeLimit" :isShowTips="item.isShowImageTips" :imgStyle="item.style" v-model="formData[item.key]"
            v-else-if="item.type === 'image'"></UploadImages>

          <UploadFile :size="size" :acceptType="item.acceptType" :imgStyle="item.style" v-model="formData[item.key]"
            v-else-if="item.type === 'file'"></UploadFile>
          <!-- <ITable :meta="item" :disabled="disabled" :columns="item.columns" v-model="formData[item.key]" v-else-if="item.type === 'table'"></ITable> -->
          <!-- <ImageView :images="formData[item.key]" v-else-if="item.type === 'image_view'"></ImageView> -->
          <a-checkbox-group v-model="formData[item.key]" :defaultValue="formData[item.key]" v-else-if="item.type === 'multi_check'">
            <div style="padding: 6px 0px;">
              <a-checkbox v-for="option in item.options" :value="option.value !== undefined ? option.value : option">{{option.title || option}}</a-checkbox>
            </div>
          </a-checkbox-group>
          <i-price :disabled="item.disabled" v-model="formData[item.key]" :size="size" v-else-if="item.type === 'price'"></i-price>
          <score-price :disabled="item.disabled" v-model="formData[item.key]" :size="size" v-else-if="item.type === 'score_price'"></score-price>
          <a-input v-model="refund_money" :disabled="inputdisabled" style="width: 160px;height: 32px;margin-right: 30px;"  size="normal" v-else-if="item.type === 'price2'"></a-input> 
          <div v-else-if="item.type === 'price1'">
            <a-input v-model="priceFloat" :disabled="inputdisabled" style="width: 160px;height: 32px;margin-right: 30px;"  size="normal"></a-input> 
            <a-checkbox @change="onchangeBox" ></a-checkbox>
          </div>
          <div v-else-if="item.type === 'sales_status'">
            <!-- <a-checkbox @change="onchangeBox" ></a-checkbox> -->
            <a-switch @change="changeSales" v-modal="formData[item.key]" />
          </div>
          <mix-price :disabled="item.disabled" :initScore="formData[(item.key_prefix || '') + 'score_price']" :initMoney="formData[(item.key_prefix || '') + 'money_price']" @moneyChange="changeMixMoneyPrice($event, item)" @scoreChange="changeMixScorePrice($event, item)" :size="size" v-else-if="item.type === 'mix_price'"></mix-price>
          <RichText class="rich-text-c" v-model="formData[item.key]" v-else-if="item.type === 'html'"></RichText>
          <ArrayInput v-model="formData[item.key]" :options="item.options" v-else-if="item.type === 'array_input'"></ArrayInput>
          <Labels v-model="formData[item.key]" @addItem="item.addItem" @deleteItem="item.deleteItem" :options="item.options" v-else-if="item.type === 'tags'"></Labels>
          <BannerInput v-model="formData[item.key]" :options="item.options" v-else-if="item.type === 'banner_input'"></BannerInput>
          <!-- <SelectProduct v-model="formData[item.key]" :options="item.options" v-else-if="item.type === 'product_id'"></SelectProduct> -->
          <LinkType v-model="formData[item.key]" :options="item.options" v-else-if="item.type === 'link'"></LinkType>
          <a-radio-group style="margin-top: 4px;" :defaultValue="formData[item.key]" v-model="formData[item.key]" v-else-if="item.type === 'radio'" :disabled="item.disabled">
            <a-radio :value="option.value" v-for="option in item.options">{{option.title}}</a-radio>
          </a-radio-group>
          <a-cascader v-model="formData[item.key]" style="width: 100%;" :options="cityData" :fieldNames="fieldNames" :placeholder="item.placeholder" v-else-if="item.type === 'address'" allowClear />
          <a-slider :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'slider'" />
          <StyleInput :options="item.options" :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'style_input'" />
          <BoxListInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'box_list_input' || item.type === 'box_ids'" ></BoxListInput>
          <ProductInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'product_id'" ></ProductInput>
          <UserInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'user_id'" ></UserInput>
          <RobotUserInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'robot_user_id'" ></RobotUserInput>
          <ProductListInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'product_list_input' || item.type === 'product_ids'" ></ProductListInput>
          <ActivitySkuListInput :disabled="item.disabled" v-model="formData[item.key]" :activity_id="item.activity_id" v-else-if="item.type === 'activity_sku_list_input' || item.type === 'activity_sku_ids'" ></ActivitySkuListInput>
          <ActivityListInput :disabled="item.disabled" :datauuid="formData['uuid']" :activityType="item.activity_type" v-model="formData[item.key]" v-else-if="item.type === 'activity_list_input' || item.type === 'activity_ids'" ></ActivityListInput>

          <UserListInput :disabled="item.disabled" :datauuid="formData['uuid']" v-model="formData[item.key]" v-else-if="item.type === 'user_list_input' || item.type === 'user_ids'" ></UserListInput>
          <UserListAllInput :disabled="item.disabled" :datauuid="formData['uuid']" v-model="formData[item.key]" v-else-if="item.type === 'user_list_all_input'" ></UserListAllInput>
          <ActivityInput :disabled="item.disabled" :activityType="item.activity_type" v-model="formData[item.key]" v-else-if="item.type === 'activity_id'" ></ActivityInput>
          <VipSkuListInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'vip_sku_ids'" />
          <CouponInput :disabled="item.disabled" @change="valChange($event, item)" v-model="formData[item.key]" v-else-if="item.type === 'coupon_id'"></CouponInput>
          <CategoryInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'category_ids'"></CategoryInput>
          <!-- <CategoryInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'character_ids'"></CategoryInput> -->
         
          <ChipInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'chip_id'"></ChipInput>
          <UserGroupInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'user_group_id'"></UserGroupInput>
          <CouponListInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'coupon_ids'"></CouponListInput>
          <ChipListInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'chip_ids'"></ChipListInput>
          <CarriageInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'carriage_input'"></CarriageInput>
          <PayTypeInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'pay_type_input'"></PayTypeInput>
          <MultiList :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'multi_list'"></MultiList>
          <MultiOpenDiscount :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'multi_open_discount'"></MultiOpenDiscount>
          <CustomTotal :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'custom_total'"></CustomTotal>
          <InviteRuleInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'invite_rule_input'"></InviteRuleInput>
          <TaskRuleInput :disabled="item.disabled" v-model="formData[item.key]" v-else-if="item.type === 'task_rule_input'"></TaskRuleInput>
          <span v-if="item.suffix" style="margin-left:6px;">{{item.suffix}}</span>

          <assetInput v-model="formData[item.key]" v-if="item.type === 'assets'"></assetInput>
          <YzmInput v-model="formData[item.key]" v-if="item.type === 'yzm'"></YzmInput>
          <QYInput v-model="formData[item.key]" v-if="item.type === 'qy_list_input'"></QYInput>

          <div style="height: 16px;" v-else-if="item.type === 'blank'"></div>
          <div v-if="item.type === 'text'" class="text-value" v-html="item.text"></div>

          <div v-if="item.tips" class="tips" v-html="tipsDisplay(item)"></div>

        </div>

      </a-col>
    </template>
  </a-row>
</template>
<script>
  import cityData from '@/utils/data.city'

  // import ImageView from '@/components/ImageView/ImageView'
  import UploadFile from '@/components/UploadFile'
  import moment from 'moment'
  import IPrice from './components/IPrice'
  import ScorePrice from './components/ScorePrice'
  import MixPrice from './components/MixPrice'
  import RichText from '@/components/RichText'
  import iSwitch from '@/components/ISwitch/ISwitch'
  import ArrayInput from './components/ArrayInput'
  import BannerInput from './components/BannerInput'
  import UploadImages from '@/components/UploadImages/UploadImages'
  import IDatePicker from "@/components/IDatePicker/IDatePicker.vue"
  import Labels from '@/components/Labels/Labels'
  import SelectProduct from '@/components/SelectProduct/SelectProduct'
  import LinkType from "@/components/LinkType/LinkType"
  import StyleInput from "@/components/IForm/components/StyleInput.vue"
  import BoxListInput from "./components/BoxListInput.vue"
  import ActivitySkuListInput from "./components/ActivitySkuListInput.vue"
  import ProductListInput from "./components/ProductListInput.vue"
  import ProductInput from "./components/ProductInput.vue"
  import UserInput from "./components/UserInput.vue"
  import RobotUserInput from "./components/RobotUserInput.vue"
  import ActivityListInput from "./components/ActivityListInput.vue"
  import UserListInput from "./components/UserListInput.vue"
  import UserListAllInput from "./components/UserListAllInput.vue"
  import ActivityInput from "./components/ActivityInput.vue"
  import VipSkuListInput from "./components/VipSkuListInput.vue"
  import CouponInput from "./components/CouponInput.vue"
  import ChipInput from "./components/ChipInput.vue"
  import ChipListInput from "./components/ChipListInput.vue"
  import UserGroupInput from "./components/UserGroupInput.vue"
  import CouponListInput from "./components/CouponListInput.vue"
  import CategoryInput from "./components/CategoryInput.vue"

  import CarriageInput from "./components/CarriageInput.vue"
  import PayTypeInput from "./components/PayTypeInput.vue"

  import AssetInput from "./components/AssetInput.vue"
  import YzmInput from "./components/YzmInput.vue"
  import QYInput from "./components/QYInput.vue"
  import MultiList from './components/MultiList.vue'

  import MultiOpenDiscount from './components/MultiOpenDiscount.vue'
  import CustomTotal from './components/CustomTotal.vue'

  import InviteRuleInput from './components/InviteRuleInput.vue'
  import TaskRuleInput from './components/TaskRuleInput.vue'

  export default {
    components: {
      IPrice,
      ScorePrice,
      MixPrice,
      RichText,
      UploadFile,
      iSwitch,
      ArrayInput,
      BannerInput,
      UploadImages,
      IDatePicker,
      Labels,
      SelectProduct,
      LinkType,
      StyleInput,
      BoxListInput,
      ActivitySkuListInput,
      ProductListInput,
      ProductInput,
      ActivityListInput,
      UserListInput,
      UserListAllInput,
      ActivityInput,
      VipSkuListInput,
      CouponInput,
      ChipInput,
      UserGroupInput,
      CouponListInput,
      ChipListInput,
      CategoryInput,
      AssetInput,
      UserInput,
      RobotUserInput,
      CarriageInput,
      PayTypeInput,
      MultiList,
      MultiOpenDiscount,
      CustomTotal,
      InviteRuleInput,
      TaskRuleInput,
      YzmInput,
      QYInput,
    },
    props: {
      size: {
        default () {
          return 'default'
        }
      },
      formFrame: {
        type: Array
      },
      border: {
        type: Boolean,
        default () {
          return true
        }
      },
      formData: {
        type: Object
      },
      width: {
        type: String,
        default () {
          // return '800px'
        }
      },
      labelWidth: {
        type: String,
        default () {
          return '150px'
        }
      },
      title: {
        type: String,
        default () {
          return ''
        }
      },
      disabled: {
        type: Boolean,
        default () {
          return false
        }
      },
      uuid: {
        type: String,
        default () {
          return ''
        }
      },
      status:{
        type:Boolean,
        default(){
          return false
        }
      }
    },
    data() {
      return {
        cityData,
        years: [],
        fieldNames: {
          label: 'text',
          value: 'text',
          children: 'children'
        },
        isInit: false,
        productAutoFillFields: null,
        switchDisabled:false,
        switchDisabled1:false,
        goodsPrice:0,
        refund_money:0,
        inputdisabled:false,
        priceFloat:0,
        refund_money:0,
        refund_money1:0
      }
    },
    created() {
      this.refund_money = this.formData.refund_money
      if(this.formData.normal_card){
                this.switchDisabled=false
                this.switchDisabled1=true
              }else{
              }
      let start = 2025
      for (var i = 0; i <= 20; i++) {
        this.years.push(start - i + '')
      }
      // console.log('form item mounted')
      this.initForm()
      this.goodsPrice = localStorage.getItem('price')
      this.refund_money = this.formData.refund_money/100
      this.refund_money1=this.formData.refund_money
      // console.log('goodsPrice',this.goodsPrice)
      // console.log('formdata',this.formData)
    },
    filters: {

    },
    watch: {
      formFrame() {
        this.initForm()
      },
      formData() {
        this.initDefaultValue()
      },
      'formData.product_id' (val) {
        this.productAutoFill(val)
      },
      'formData.node_id' (val) {
        this.productAutoFill(val)
      },
      uuid() {
        this.initForm()
      }
    },
    methods: {
      changeSales(e){
        console.log(e,'e')
        
        if(e){
          this.formData.sales_status=1
        }else{
          this.formData.sales_status = 0
        }
        console.log('form',this.formData)
      },
      onchangeBox(e){
        this.priceFloat = ((this.goodsPrice*0.9 + this.formData.refund_money) / 100).toFixed(1)
        this.formData.refund_balance = this.goodsPrice*0.9 + this.formData.refund_money
        this.formData.refund_money=0
        this.refund_money=0
        this.inputdisabled=e.target.checked
        if(!e.target.checked){
          this.refund_money=this.refund_money1/100
          this.formData.refund_money=this.refund_money1
          this.formData.refund_balance = 0
          this.priceFloat=0
        }
        console.log(this.formData)
        // console.log(this.refund_money)
      },
      onChange(){
        if(this.formData.normal_card){
         this.switchDisabled=false
         this.switchDisabled1=true
        }else{
          this.switchDisabled1=false
        }
      },
      onChange1(e){
        console.log(this.formData)
        if(this.formData.optional_card){
          this.switchDisabled1=false
          this.switchDisabled=true
        }else{
          this.switchDisabled=false
          // this.switchDisabled1=false
        }
      },
      valChange (val, item) {
        if (item.change) {
          item.change(val)
        }
        // console.log('value change====>', val, item)
      },
      tipsDisplay (item) {
        let tips = item.tips
        if (item.sizeLimit) {
          tips = '限制' + item.sizeLimit + 'K &nbsp&nbsp' + tips
        }
        return tips
      },
      productAutoFill (val) {
        if (val && this.productAutoFillFields) {

          this.$http.get(`/shop/products/${val}`).then(res => {
            let info = res.data.info
            //这里特殊处理，将活动中选择商城商品后，回收价 设置为 商城商品的 划线价，为了兼容商城的商品价格包含积分或者魔力值的情况
            info.money_price = info.line_money_price
            for (let key in this.productAutoFillFields) {
              let value = this.productAutoFillFields[key]
              if(Array.isArray(value)){
                for (let ljk in value) {
                  this.$set(this.formData, value[ljk], info[key])
                }
              }else{
                this.$set(this.formData, value, info[key])
              }
              
            }
          })
          // console.log('fields ==>', this.productAutoFillFields)
        }
      },
      changeMixMoneyPrice (moneyPrice, item) {
        let key = (item.key_prefix || '') + 'money_price'
        this.$set(this.formData, key, moneyPrice)
        // this.formData[]
      },
      changeMixScorePrice (scorePrice, item) {
        // console.log(scorePrice, item)
        let key = (item.key_prefix || '') + 'score_price'
        this.$set(this.formData, key, scorePrice)
        // console.log(this.formData)
        // this.formData[]
      },
      initForm () {
        // console.log('form change    ====>', this.formFrame)
        for (var i = this.formFrame.length - 1; i >= 0; i--) {
          if (this.formFrame[i].type === 'product_id' && this.formFrame[i].auto_fill_fields) {
            this.productAutoFillFields = this.formFrame[i].auto_fill_fields
          }

          if (this.formFrame[i].type === 'invite_rule_input') {
            let key = this.formFrame[i].key
            if (this.formData[key] === undefined || !this.formData[key]) {
              this.$set(this.formData, key, {
                reward_list: [],
                invited_reward: {},
              })
            }
          }

          if (this.formFrame[i].type === 'task_rule_input') {
            let key = this.formFrame[i].key
            if (this.formData[key] === undefined || !this.formData[key]) {
              this.$set(this.formData, key, {
                reward_list: [],
              })
            }
          }

          // 设置默认值
          // let key = this.formFrame[i].key
          // let defaultVal = this.formFrame[i].default
          // if (defaultVal  && (this.formData[key] === undefined)) {
          //   console.log(key, 'setdefault =====>', defaultVal)
          //   this.$set(this.formData, key, defaultVal)
          // }

        }
        if(this.status){
        console.log('123')
      }
        this.isInit = true
      },
      initDefaultValue () {
        for (var i = this.formFrame.length - 1; i >= 0; i--) {
          let key = this.formFrame[i].key
          // 设置默认值
          let defaultVal = this.formFrame[i].default
          if (defaultVal  && (this.formData[key] === undefined)) {
            console.log(key, 'setdefault =====>', defaultVal)
            this.$set(this.formData, key, defaultVal)
          }
        }
      },
      calcIf(item) {
        if (!item.where)
          return true

        if (typeof item.where == 'object') {
          let targetVal = ''
          let formVal = ''
          for (let key in item.where) {
            targetVal = item.where[key]
            formVal = this.formData[key]

            // 数组也是Object
            if (typeof targetVal == 'object') {
              if (targetVal.indexOf(formVal) < 0) {
                return false
              }
            }
            else if (targetVal !== formVal) {
              return false
            }
          }

          return true
        }
        else if (typeof item.where[0] == 'string')
          return this.formData[item.where[0]] === item.where[1]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .rich-text-c {
    // margin-bottom: 100px;
  }

  .tips {
    color: #aaa;
    font-size: 90%;
    margin-top: 10px;
  }

  .form-item {
    padding: 20px 0px 20px 0px;
    position: relation;
    margin-bottom: 10px;
  }

  .border {
    border: 1px solid #e1e1e1;
  }

  .form-title {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 110%;
    font-weight: 700;
    background: white;
    padding: 0px 10px;
  }

  .input-item {
    display: flex;
    margin-bottom: 16px;

    // border: 1px solid red;
    .select {
      width: 100%;
    }
  }

  .input-title {
    text-align: right;
    min-width: 100px;
    padding-right: 11px;
    position: relative;
    top: 5px;
    font-weight: 500;

    .star {
      color: red;
      position: absolute;
    }
  }

  .text-value {
    color: gray;
    position: relative;
    top: 5px;
    color: #aaa;
  }

  .input-title-empty-2 {
    width: 20px;
    height: 1px;
  }
</style>
